<template>
  <div class="fireworks-container">
    <canvas ref="canvas" class="fireworks-canvas">1</canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.createFireworks();
  },
  methods: {
    createFireworks() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      const fireworks = [];

      function Firework(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.radius = 2;
        this.speed = 1;
        this.opacity = 1;
        this.distance = Math.random() * 50 + 150;
        this.angle = Math.random() * Math.PI * 2;
        this.dx = Math.cos(this.angle) * this.distance;
        this.dy = Math.sin(this.angle) * this.distance;
        this.gravity = 0.05;

        this.update = function () {
          this.opacity -= 0.01;
          this.radius += 0.05;
          this.speed -= this.gravity;
          this.x += this.dx * this.speed;
          this.y += this.dy * this.speed;
        };

        this.draw = function () {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.globalAlpha = this.opacity;
          ctx.fill();
        };
      }

      function createParticles(x, y, color) {
        for (let i = 0; i < 50; i++) {
          fireworks.push(new Firework(x, y, color));
        }
      }

      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (let i = 0; i < fireworks.length; i++) {
          fireworks[i].update();
          fireworks[i].draw();

          if (fireworks[i].opacity <= 0) {
            fireworks.splice(i, 1);
          }
        }

        requestAnimationFrame(animate);
      }

      canvas.addEventListener("click", function (event) {
        const x = event.clientX - canvas.offsetLeft;
        const y = event.clientY - canvas.offsetTop;

        createParticles(x, y, getRandomColor());
      });

      function getRandomColor() {
        const colors = ["#f8a978", "#f8d178", "#f2f2f2"];
        return colors[Math.floor(Math.random() * colors.length)];
      }

      // Resize canvas to fill parent container
      function resizeCanvas() {
        canvas.width = canvas.parentNode.offsetWidth;
        canvas.height = canvas.parentNode.offsetHeight;
      }

      // Call resizeCanvas function when window is resized
      window.addEventListener("resize", resizeCanvas, false);

      // Call resizeCanvas function initially
      resizeCanvas();

      animate();
    },
  },
};
</script>

<style>
.fireworks-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #fff;
}

.fireworks-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<!-- 在这个例子中，我们添加了一个样式和一个父元素，用于设置canvas元素的大小和位置 -->






